@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  /* Base variables */
  --font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;

  /* Light theme variables */
  --background: #ffffff;
  --foreground: #213547;
  --scroll-bar-color: #000;
  --scroll-bar-background: #fff;
}

/* Dark theme variables */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --background: #242424;
    --foreground: #ffffffde;
    --scroll-bar-color: #ffffff40;
    --scroll-bar-background: #0000;
    --text-secondary: #ffffff40;
  }
}

body {
  font-family: var(--font-family);
  background-color: var(--background);
  color: var(--foreground);
  scrollbar-color: var(--scroll-bar-color) var(--scroll-bar-background);
}

.ExampleApp {
  background-color: #ffffff;
  color: #213547;
  color-scheme: auto;
}

.sui-layout-main-header {
  margin-bottom: 1rem;
}
